import React from "react";
// 注意： prop-types 包的职能跟单一，只提供了 一些常见的 数据类型，用于做类型校验
import ReactTypes from "prop-types";

export default class Counter extends React.Component {
    constructor(props) {
        super(props);

        // 初始化组件，保存的是组件的私有数据
        this.state = {
            msg: "ok",
            count: props.initcount // 把 父组件传递过来的 initcount 赋值给子组件 state 中的 count值。这样的话，就把 count 值改成了可读可写的 state 属性。因此，以后就能实现“点击 按钮 ，count 值 + 1”的需求了
        };
    }

    // 在 React 中，使用静态的 defaultProps 属性，来设置组件的默认属性值
    static defaultProps = {
        initcount: 0 // 如果外界没有传递 initcount，那么，自己初始化一个数值（比如0）
    };

    // 这是创建一个 静态的 propTypes 对象，在这个对象中，可以把 外界传递过来的属性，做类型校验
    static propTypes = {
        initcount: ReactTypes.number // 使用 prop-types 包，来定义 initcount 为 number 类型
    };

    render() {
        return (
            <div>
                <div>
                    <h3>这是 Counter 计数器组件 </h3>
                    {/* 这里的 this 指向的是 Counter 组件的实例  */}
                    <input type="button" value="+1" id="btn" onClick={this.myMethod} />
                    <p>当前的计数是：{this.state.count}</p>
                </div>
            </div>
        );
        // 当 return 执行完毕后， 虚拟DOM创建好了，但是，还没有挂载到真正的页面中
    }

    // 点击事件的方法定义
    myMethod = () => {
        // 修改组件的state里面的值
        this.setState({
            count: this.state.count + 1
        });
    };
}